{% extends 'customer_dashboard.html' %}

{% block content %}
<style>
  .card {
    background-color: #f5f9ff;
    padding: 30px 40px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    max-width: 800px;
    margin: 0 auto;
  }

  .card h2 {
    text-align: center;
    font-size: 24px;
    margin-bottom: 10px;
  }

  .card p.subtext {
    text-align: center;
    color: #555;
    margin-bottom: 20px;
  }

  .message {
    text-align: center;
    margin: 15px 0;
    font-weight: bold;
  }

  .card-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .card-item {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  }

  .card-item h4 {
    margin-bottom: 10px;
  }

  .btn {
    background-color: #3399ff;
    color: #fff;
    padding: 8px 18px;
    font-size: 15px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    margin-right: 10px;
  }

  .btn:hover {
    background-color: #267cd6;
  }

  .btn-danger {
    background-color: #dc3545;
  }

  .btn-danger:hover {
    background-color: #c82333;
  }

  .btn-warning {
    background-color: #ffc107;
    color: #333;
  }

  .btn-warning:hover {
    background-color: #e0a800;
  }

</style>

<div class="card">
  <h2><i class="bi bi-exclamation-circle"></i> 银行卡挂失 / 取消挂失</h2>
  <p class="subtext">请选择您要挂失或取消挂失的银行卡：</p>

  {% if message %}
    <p class="message" style="color: {{ 'green' if success else 'red' }};">{{ message }}</p>
  {% endif %}

  {% if cards %}
  <div class="card-container">
    {% for card in cards %}
    <div class="card-item">
      <h4><i class="bi bi-credit-card-2-front"></i> 卡号：{{ card.cardID }}</h4>
      <p><i class="bi bi-tags"></i> <strong>存款类型：</strong>{{ card.savingName or '未指定' }}</p>
      <p>
        <i class="bi bi-shield-check"></i> <strong>当前状态：</strong>
        {% if card.IsReportLoss == '是' %}
          <span style="color: red;">已挂失</span>
        {% else %}
          <span style="color: green;">正常</span>
        {% endif %}
      </p>

      <form method="POST" style="margin-top: 10px;">
        <input type="hidden" name="cardID" value="{{ card.cardID }}">
        {% if card.IsReportLoss == '是' %}
          <button type="submit" name="action" value="unreport" class="btn btn-warning">取消挂失</button>
        {% else %}
          <button type="submit" name="action" value="report" class="btn btn-danger">确认挂失</button>
        {% endif %}
      </form>
    </div>
    {% endfor %}
  </div>
  {% else %}
    <p style="color: gray; text-align: center;">您没有可管理的银行卡。</p>
  {% endif %}

  <div style="margin-top: 30px; text-align: center;">
    <a href="{{ url_for('customer.customer_home') }}" class="btn">返回首页</a>
  </div>
</div>
{% endblock %}
